<template>
  <dv-border-box-12 class="graguate" :color="['#50649a', '#50649b']">
    <div class="Graguatedmain-content">
      <select name="年份" id="change" @change="changeYear($event.target.value)">
        <option value="1年">2019</option>
        <option value="2年">2018</option>
        <option value="3年">2017</option>
        <option value="历届">历届</option>
      </select>
      <div id="Graguatedmain"></div>
    </div>
  </dv-border-box-12>
</template>

<script>
import * as echarts from "echarts/core";
import { zhuti } from "@/assets/index.js";
import { TooltipComponent, GridComponent } from "echarts/components";
import { PictorialBarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
export default {
  name: "GraduatedComponents",
  data() {
    return {
      info: [],
      year: "1年", // 选中的年份
      xueyuan: [
        // "管理学院",
        // "外语学院",
        // "电信与智能制造学院",
        // "商学院",
        // "计算机与软件工程学院",
        // "医学院",
      ],
      sum: [],
      work: [],
      radio: [],
      status: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    changeYear(value) {
      this.year = value;
      console.log("改变年份,", this.year);
      this.radio = [];
      this.xueyuan = [];
      this.sum = [];
      this.work = [];
      this.getInfo();
    },
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/collegeratio/rate/${this.year}`),
        method: "get",
      }).then((response) => {
        // console.log("就业率排名,", response.data.data);
        this.info = response.data.data;

        this.$nextTick(() => {
          for (let index in this.info) {
            if (response.data.data[index].college == "电信与智能制造学院") {
              this.xueyuan.push("电信学院");
            } else if (
              response.data.data[index].college == "计算机与软件工程学院"
            ) {
              this.xueyuan.push("计软学院");
            } else {
              this.xueyuan.push(response.data.data[index].college);
            }
            // this.xueyuan.push(response.data.data[index].college);
            this.sum.push(response.data.data[index].allnumber);
            this.work.push(response.data.data[index].employmentOk);
          }
          this.initialize();
        });
      });
    },
    initialize() {
      echarts.use([
        TooltipComponent,
        GridComponent,
        PictorialBarChart,
        CanvasRenderer,
      ]);

      var chartDom = document.getElementById("Graguatedmain");
      var myChart = echarts.init(chartDom, zhuti);
      var option;

      // 计算就业率
      for (let i = 0; i < this.sum.length; i++) {
        this.radio.push({
          value: ((this.work[i] / this.sum[i]) * 100).toFixed(2),
          originalIndex: i,
        });
      }

      // 对就业率数组进行排序
      this.radio.sort((a, b) => b.value - a.value);

      option = {
        grid: {
          top: "20%", // 调整这里的数值来控制下移的距离
          bottom: "15%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            const dataIndex = params[0].dataIndex;
            const value = params[0].value;
            const rank = dataIndex + 1;

            return (
              params[0].name +
              "<br>" +
              "排名：" +
              rank +
              "<br>" +
              "就业率：" +
              value +
              "%"
            );
          },
        },
        xAxis: {
          data: this.radio.map((item) => this.xueyuan[item.originalIndex]),
          axisTick: { show: false },
          axisLine: { show: false },
          splitLine: { show: false },
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          name: "就业率排名",
          nameLocation: "middle", // 将Y轴名称放置在轴线的中间
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false },
        },
        color: ["#79E2F9"],
        series: [
          {
            name: "hill",
            type: "pictorialBar",
            barCategoryGap: "-130%",
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              opacity: 0.5,
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: this.radio.map((item) => item.value),
            z: 10,
            label: {
              show: true,
              position: "top",
              color: "#fff",
              formatter: "{c}%",
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  created() {
    this.getInfo();
  },
  mounted() {},
};
</script>

<style scoped>
.Graguatedmain-content {
  position: relative;
  width: 100%;
  height: 100%;
  /* margin: 5px; */

  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}
#Graguatedmain {
  width: 100%;
  height: 90%;
}
#change {
  color:#8FE6F4;
  position: absolute;
  top: 15px;
  right: 25px;
  z-index: 99;

  /* border-radius: 10px; */
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121 ,226, 249, 0.6);
  border-bottom: 1px solid rgba(121 ,226, 249, 0.35);
  border-left: 1px solid rgba(121 ,226, 249, 0.35);
}
#change option{
  /* background: rgba(255, 255, 255, 0.25); */
  /* backdrop-filter: blur(25px); */
  border: 1px solid rgba(121 ,226, 249, 0.6);
  border-bottom: 1px solid rgba(121 ,226, 249, 0.35);
  border-left: 1px solid rgba(121 ,226, 249, 0.35);
}
/* .Graguatedmain-content{
  float: right;
} */
</style>
